<template>
<div>
   <PostList v-for="(item,index) in postList" :postId="item.id" :title="item.title" :content="item.content" :postCount="postCount"
              :key="index"></PostList>

              index

             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
</div>
</template>

<script>
import PostList from '@/components/PostList'

export default {
  name: 'Index',
  components: {
    PostList
  },
  data () {
    return {
      total: 900,
      postList: [
        {
          id: 1,
          title: '1',
          content: '1111'
        },
        {
          id: 2,
          title: '2',
          content: '22222'
        }
      ],
      postCount: 100,
      currentPage: 5
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>

<style scoped>

</style>
